<template>
  <div class="header">
      <div class="logo"><router-link :to="{path:'/index'}"><img src="../../images/common/logo_white.png"></router-link></div>
      <div class="exit" type="primary" @click="logout">退出 <i class="iconfont jl_icon-arrowright1"></i></div>
      <div class="link">
          <router-link :to="{path:'/list'}">简历列表</router-link>

          <a href="/webcv/page/preview" target="_blank">简历模板</a>
      </div>
  </div>
</template>
<script>
import {logout} from 'api'
export default {
  name: 'navHeader',
  data() {
    return {
      activeIndex: '1',
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    logout(){
      this.$promise.post(logout).then(resp=>{
        console.log(resp);
        if(resp.status==1){
          Cookies.remove(SESSION_KEY, { domain: SESSION_VALUE });
          this.$router.replace({path:"login"})
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
    @import '../../css/screen.scss';
    .header{
        display: flex;
        justify-items: center;
        justify-content: space-between;
        background: -moz-linear-gradient(top, #016dc9 0%, #0568c5 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#016dc9), color-stop(100%,#0568c5));
        background: -webkit-linear-gradient(top, #016dc9 0%,#0568c5 100%);
        background: -o-linear-gradient(top, #016dc9 0%,#0568c5 100%);
        background: -ms-linear-gradient(top, #016dc9 0%,#0568c5 100%);
        background: linear-gradient(to bottom, #016dc9 0%,#0568c5 100%);
        .logo{
            margin: 10px 20px;
            img{
                max-height: 30px;
            }
        }
        .exit{
            position: absolute;
            right: 20px;
            top:50%;
            margin-top:-15px;
            height: 30px;
            line-height:30px;
            font-size: 12px;
            color: #fff;
            opacity: .5;
            cursor: pointer;
            i{
                font-size: 10px;
            }
        }
        .exit:hover{
            opacity: 1;
        }
        .link{
            height: 50px;
            line-height: 50px;
            color:#fff;
            margin-right: 70px;
            a{
                text-decoration: none;
                color: #fff;
                font-size: 12px;
                opacity: .5;
                margin-left: 10px;
            }
            a:hover{
                opacity: 1;
            }
        }
    }
</style>